<template>
	<view>
		<view class="top">
			<view class="name">
				{{pageData.name}}
			</view>
			<view class="price">
				<text style="color:#989898">应付金额：</text>
				<text style="color:#4065e0">{{pageData.amount}}</text>
			</view>
		</view>
		<view class="tab-wrap">
			<view class="btn-wrap">
				
				<view class="item"  @click="tabChange(2)" :class="{'active':nowindex==2}">支付宝</view>
				<view class="item"  @click="tabChange(3)" :class="{'active':nowindex==3}">微信</view>
				<view class="item"  @click="tabChange(1)" :class="{'active':nowindex==1}">银行卡</view>
			</view>
			<view class="desc">
				付款信息
			</view>
		</view>
		<view class="back-info" v-show="nowindex==1">
			<view class="list-info">
				<view class="left">银行卡号：{{pageData.bank_card}}</view>
				<view class="right" @click="copyData(pageData.bank_card)">复制</view>
			</view>
			<view class="list-info">
				<view class="left">开   户   行：{{pageData.bank_of_deposit}}</view>
				<view class="right"  @click="copyData(pageData.bank_of_deposit)">复制</view>
			</view>
			<view class="list-info">
				<view class="left">开户姓名：{{pageData.bank_user}}</view>
				<view class="right" @click="copyData(pageData.bank_user)">复制</view>
			</view>
		</view>
		<view class="erweima" v-show="nowindex!=1">
			<image class="erweima-main" :src="imgUrl" mode=""></image>
			<view class="erweima-desc">
				{{nowindex==2?'支付宝收款码':'微信收款码'}}
			</view>
			<view class="save" @click="download">
				保存图片
			</view>
		</view>
		<view class="bottom-wrap">
			<view v-for="(item,index) in instruction" :key="index">
				{{item}}
			</view>
			
			<view class="sub-wrap">
				<view class="left" @click="chooseImg">
					上传凭证
				</view>
				<view class="right" @click="subdata" :class="{'active':hasload}">
					确认提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				img_url:'',
				hasload:false,
				pageData:{},
				instruction:[],
				imgUrl:'',
				nowindex:2,
				id:''
			}
		},
		onLoad(options) {
			this.id=options.id
			this.getData()
		},
		methods:{
			subdata(){
				if(!this.hasload){
					uni.showToast({
					    title: '请上传凭证',  
					     icon: 'none', 
					    duration:4000, 
					});  
					return
				}
				let that=this
				
				that.apipost('/api/wealth/submit',{
					img_url:that.img_url,
					package_id:that.id
				},true).then(res => {
					if(res.Code==10200){
						uni.showToast({
						    title: res.Message,  
						    mask: false,  
							icon: 'none', 
						    duration:4000, 
						});  
						that.img_url=''
						that.hasload=false
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			download(){
				
				let that=this
				
				uni.saveImageToPhotosAlbum({
				    filePath:that.imgUrl,
				    success: function () {
				        uni.showToast({
				            title: '保存成功',  
				            mask: false,  
				            duration:4000, 
				        });  
				    }
				});
				
			},
			copyData(val){
				uni.setClipboardData({
				    data: val,
				    success: function () {
				        uni.showToast({
				            title: '复制成功',
				            duration:4000,
				        	icon:'none'
				        });
				    }
				});
			},
			chooseImg(){
				
				let that=this
				
				uni.chooseImage({
					count:1,
					sizeType:'compressed',
					success: (res) => {
						const imgsFile=res.tempFilePaths
						uni.showLoading({
						    title: '正在上传凭证'
						});
						const uper=uni.uploadFile({
							url: that.upUrl+'/api/wealth/up_p2c_img',
							filePath:imgsFile[0],
							name:'img',
							header:{  
								"Authorization": uni.getStorageSync("auth_token")
							},
							success:function(res){
								
								
								let data=JSON.parse(res.data)
								if(data.Code=='10200'){
									that.hasload=true
									uni.showToast({
										title: "上传成功",
										icon: "none",
										duration:4000,
									});
									uni.hideLoading();
									that.img_url=data.Data
									
									
									
								}
							}
						})
						//上传进度更新的方法
						// uper.onProgressUpdate((e)=>{
						// 	if(e.progress==100){
								
								
						// 	}else{
								
						// 	}
							
						// })
					}
				})
			
			},
			getData(){
				let that=this
				
				that.apipost('/api/wealth/payment',{
					id:that.id
				},true).then(res => {
					if(res.Code==10200){
						let data=res.Data
						
						that.pageData=data
						that.imgUrl=this.pageData.alipay_qrcode
						that.instruction=data.instruction
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			tabChange(val){
				this.nowindex=val
				switch(val){
					case 1:
					
					break;
					case 2:
					this.imgUrl=this.pageData.alipay_qrcode
					break;
					case 3:
					this.imgUrl=this.pageData.wx_qrcode
					break;
				}
				
			}
		}
	}
</script>

<style>
	.list-info .right{
		color:#0ec73e;
		text-decoration: underline;
	}
	.list-info{
		padding:10rpx 20rpx;
		
		box-sizing: border-box;
		display:flex;
		align-items: center;
		justify-content: space-between;
	}
	.erweima-main{
		width:256rpx;
		height:256rpx;
		display:block;
		margin:0 auto;
	}
	.sub-wrap{
		margin-top:90rpx;
		display:flex;
		align-items: center;
		justify-content: space-around;
	}
	.sub-wrap .left{
		width:286rpx;
		height:68rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		color:#fff;
		background:#4362ee;
		border-radius: 80rpx;
	}
	.sub-wrap .right{
		width:286rpx;
		height:68rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		color:#797979;
		background:#e8e8e8;
		border-radius: 80rpx;
	}
	.save{
		color:#4362ee;
		width:140rpx;
		margin:0 auto;
	}
	page{
		box-sizing: border-box;
		overflow: hidden;
		height:100%;
		background:#f7f7f7;
	}
	.erweima-desc{
		text-align: center;
		padding:10rpx 0;
		font-size:36rpx;
	}
	.top{
		width:716rpx;
		margin:0 auto;
		background:#fff;
		padding:50rpx 0 15rpx 34rpx;
		box-sizing: border-box;
		margin-top:12rpx;
	}
	.top .name{
		padding-bottom:20rpx;
	}
	.tab-wrap{
		background:#fff;
		margin:0 auto;
		width:740rpx;
		margin-top:12rpx;
		padding: 70rpx 0 0 20rpx;
		box-sizing: border-box;
	}
	.tab-wrap .desc{
		padding:76rpx 0 32rpx 0;
	}
	.btn-wrap{
		display:flex;
		
	}
	.btn-wrap .item{
		width:158rpx;
		height:62rpx;
		border-radius: 9rpx;
		display:flex;
		border:1rpx solid #4362ee;
		display:flex;
		align-items: center;
		justify-content: center;
		margin-right:18rpx;
	}
	.active{
		background:#4362ee!important;
		color:#fff!important;
	}
	.back-info{
		width:730rpx;
		margin:0 auto;
		margin-top:10rpx;
		padding:20rpx 0 10rpx 0;
		background:#fff;
	}
	.erweima{
		width:730rpx;
		margin:0 auto;
		margin-top:10rpx;
		padding:20rpx 0 10rpx 0;
		background:#fff;
	}
	.bottom-wrap{
		box-sizing: border-box;
		width:730rpx;
		margin:0 auto;
		margin-top:10rpx;
		padding:68rpx 0 40rpx 22rpx;
		background:#fff;
	}
</style>
